import { useState } from "react";
import { BottomNavigation } from "@/components/ui/bottom-navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Camera,
  MapPin,
  Calendar,
  Compass,
  Share,
  Plus,
  Grid3X3,
  List,
  Search,
  Filter,
} from "lucide-react";

const mockPhotos = [
  {
    id: 1,
    url: "https://images.pexels.com/photos/9373300/pexels-photo-9373300.jpeg",
    location: "北京故宫",
    date: "2024-01-15",
    category: "景点",
  },
  {
    id: 2,
    url: "https://images.pexels.com/photos/2614816/pexels-photo-2614816.jpeg",
    location: "上海外滩",
    date: "2024-01-14",
    category: "城市",
  },
  {
    id: 3,
    url: "https://images.pexels.com/photos/30629862/pexels-photo-30629862.jpeg",
    location: "杭州西湖",
    date: "2024-01-13",
    category: "自然",
  },
  {
    id: 4,
    url: "https://images.pexels.com/photos/4241550/pexels-photo-4241550.jpeg",
    location: "成都熊猫基地",
    date: "2024-01-12",
    category: "动物",
  },
  {
    id: 5,
    url: "https://images.pexels.com/photos/3222196/pexels-photo-3222196.jpeg",
    location: "深圳海边",
    date: "2024-01-11",
    category: "海景",
  },
  {
    id: 6,
    url: "https://images.pexels.com/photos/2181230/pexels-photo-2181230.jpeg",
    location: "广州塔",
    date: "2024-01-10",
    category: "建筑",
  },
];

const features = [
  {
    icon: MapPin,
    title: "地点轴",
    description: "按地点智能分组照片",
    color: "bg-photo-100 text-photo-800",
    href: "/location",
  },
  {
    icon: Calendar,
    title: "时间轴",
    description: "日历视图查看回忆",
    color: "bg-coral-100 text-coral-800",
    href: "/timeline",
  },
  {
    icon: Compass,
    title: "附近",
    description: "发现周边拍摄地点",
    color: "bg-sage-100 text-sage-800",
    href: "/nearby",
  },
  {
    icon: Share,
    title: "社媒",
    description: "一键分享精美内容",
    color: "bg-purple-100 text-purple-800",
    href: "/social",
  },
];

export default function Index() {
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");

  return (
    <div className="min-h-screen bg-background pb-20 safe-bottom">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-background/80 backdrop-blur-lg border-b border-border">
        <div className="flex items-center justify-between p-4">
          <div>
            <h1 className="text-2xl font-bold text-foreground">智能相册</h1>
            <p className="text-sm text-muted-foreground">让回忆更有序</p>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="icon">
              <Search className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="icon">
              <Filter className="h-4 w-4" />
            </Button>
            <Button
              variant="outline"
              size="icon"
              onClick={() => setViewMode(viewMode === "grid" ? "list" : "grid")}
            >
              {viewMode === "grid" ? (
                <List className="h-4 w-4" />
              ) : (
                <Grid3X3 className="h-4 w-4" />
              )}
            </Button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="p-4 space-y-6">
        {/* Quick Actions */}
        <section>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-foreground">智能功能</h2>
            <Button variant="ghost" size="sm">
              查看全部
            </Button>
          </div>
          <div className="grid grid-cols-2 gap-3">
            {features.map((feature) => {
              const Icon = feature.icon;
              return (
                <Card
                  key={feature.title}
                  className="hover:shadow-md transition-shadow"
                >
                  <CardContent className="p-4">
                    <div className="flex items-center gap-3">
                      <div className={`p-2 rounded-lg ${feature.color}`}>
                        <Icon className="h-5 w-5" />
                      </div>
                      <div>
                        <h3 className="font-medium text-foreground">
                          {feature.title}
                        </h3>
                        <p className="text-xs text-muted-foreground">
                          {feature.description}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </section>

        {/* Recent Photos */}
        <section>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-foreground">最近照片</h2>
            <Button variant="ghost" size="sm">
              查看全部
            </Button>
          </div>

          {viewMode === "grid" ? (
            <div className="grid grid-cols-2 gap-3">
              {mockPhotos.map((photo) => (
                <Card
                  key={photo.id}
                  className="overflow-hidden group hover:shadow-lg transition-all"
                >
                  <div className="relative aspect-square">
                    <img
                      src={photo.url}
                      alt={photo.location}
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
                    <div className="absolute bottom-2 left-2 right-2">
                      <Badge variant="secondary" className="text-xs mb-1">
                        {photo.category}
                      </Badge>
                      <p className="text-white text-sm font-medium">
                        {photo.location}
                      </p>
                      <p className="text-white/80 text-xs">{photo.date}</p>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          ) : (
            <div className="space-y-3">
              {mockPhotos.map((photo) => (
                <Card
                  key={photo.id}
                  className="overflow-hidden hover:shadow-md transition-shadow"
                >
                  <CardContent className="p-3">
                    <div className="flex items-center gap-3">
                      <div className="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
                        <img
                          src={photo.url}
                          alt={photo.location}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <Badge variant="secondary" className="text-xs">
                            {photo.category}
                          </Badge>
                        </div>
                        <h3 className="font-medium text-foreground truncate">
                          {photo.location}
                        </h3>
                        <p className="text-sm text-muted-foreground">
                          {photo.date}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </section>

        {/* Add Photo Button */}
        <div className="fixed bottom-24 right-4">
          <Button size="lg" className="rounded-full shadow-lg">
            <Plus className="h-5 w-5 mr-2" />
            添加照片
          </Button>
        </div>
      </div>

      <BottomNavigation />
    </div>
  );
}
